<template>
	<view class="tab">
		<view class="tabbar">
			<view class="tabbar-item" @click='toHome()'>
				<view class="mine">
					<view class="img">
						<image src='@/static/tabbar/shouye.png'></image>
					</view>
				</view>
				<view>首页</view>
			</view>
			<!-- <view class="tabbar-item" @click="toindex()">
				<view class="index1">
					<view class="indeximg">
						<image src='@/static/tabbar/more.png'></image>
					</view>
				</view>
				<view class="title">更多</view>
			</view> -->
			<view class="tabbar-item tabbar-item2" @click='tozixun()'>
				<view class="center">
					<view class="img">
						<image src='@/static/tabbar/m.png'></image>
					</view>
				</view>
				<view>客服</view>
			</view>
			<view class="tabbar-item" @click='tomine()'>
				<view class="mine">
					<view class="img">
						<image src='@/static/tabbar/mine.png'></image>
					</view>
				</view>
				<view>商城</view>
			</view>
		</view>
		<view class="footer"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toHome() {
				uni.redirectTo({
					url: "/pages/tabbar/home"
				})
			},
			toindex() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			tozixun() {
				uni.navigateTo({
					url: '/pages/zixun/zixun'
				})
			},
			tomine() {
				uni.redirectTo({
					url: '/pages/mine/mine'
				})
			}
		}
	}
</script>

<style lang="scss">
	.img {
		width: 42rpx;
		height: 45rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.index1 {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mine {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.center {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.index1 {
		position: absolute;
		top: 0;
		border-radius: 50%;
		transform: translateY(-50%);
		background-color: #FFF7E8;

		.indeximg {
			background-color: #D2AB60;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 42rpx;
				height: 45rpx;
			}
		}
	}

	.title {
		position: absolute;
		bottom: 72rpx;
		font-family: REEJI-CHAO-RuikaiGBT-Flash;
	}

	.tab {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF7E8;

		.tabbar {
			height: 95rpx;
			background-color: #FFF7E8;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.tabbar-item {
				width: 120rpx;
				line-height: 20rpx;
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				align-items: center;
				height: 90rpx;
				font-size: 22rpx;
				color: #C89E4D;
				font-weight: 550;


			}
		}
	}

	.footer {
		height: 62rpx;
	}
</style>